<!-- Modal -->
<div class="modal fade" id="messages-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-default full-width message-max-height">
      <div class="modal-header panel-heading">
          <div class="with-icon">
                <i class="fa fa-comment"></i>
                <h4 class="h3">Messages </h4>
                <span class="badge danger">2</span>
          </div>
          
        <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">&times;</button>
        
      </div>
      <div class="modal-body padding-none">
        <div class="row margin-none grey">
            <div class="col-md-5 col-sm-5 col-xs-5 padding-none inbox-max-height">
                <div class="popup-search">
                    <form role="search">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search Username ...">
                            <span class="input-group-btn">
                              <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                            </span>
                          </div><!-- /input-group -->
                        </div>

                    </form>
                </div>

                <div class="user-list">
                    <ul class="user-messages-list list-unstyled">
                        <li class="unread showmessage">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>

                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                            <span class="badge danger pull-right">2</span>
                        </li>
                        <li class="showmessage">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>

                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                        </li>
                        <li class="unread showmessage">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>
                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                            <span class="badge danger pull-right">2</span>
                        </li>
                        <li class="showmessage last-message">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>

                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                        </li>
                        <li class="unread showmessage">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>
                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                            <span class="badge danger pull-right">2</span>
                        </li>
                        <li class="showmessage last-message">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>

                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                        </li>
                        <li class="unread showmessage">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>
                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                            <span class="badge danger pull-right">2</span>
                        </li>
                        <li class="showmessage last-message">
                            <span>
                                <a href="#" class="thumbnail-user">
                                   <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                                </a>

                            </span>
                            <span class="user-info">
                                <a href="#">Username</a>
                                <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </div><!-- ./col-md-5 -->
            <div class="col-md-7 col-sm-7 col-xs-7 padding-none border-left">
                <div class="message-head showonclick" style="display: none">
                        <span>
                           <a href="#" class="thumbnail-user">
                              <img src="http://placehold.it/35x35" class="img-responsive img-thumbnail">
                           </a>

                       </span>
                       <span class="user-info">
                           <a href="#">Username</a>
                           <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                       </span>

                    <span class="pull-right message-btns-wrap">
                        <button class="btn btn-default btn-sm" type="button"><i class="fa fa-star"></i> Fav<span class="mobile-none">ourite</span></button>

                        <div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle" type="button">More <span class="caret"></span></button>
                            <ul role="menu" class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                            </ul>
                      </div>
                    </span>

                </div>
                <div class="message-body grey">
                    <p class="showonclick no-message-text">Select a user to chat with or <br><a href="search-profiles.php">search</a> to find new people</p>
                    <div class="showonclick"  style="display: none;">
                        <ul class="user-chat list-unstyled">
                            <li class="unread-msg-right">
                                <div class="username-time">
                                    <a href="#" class="pull-left">Username</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Lorem ipsum dolor sit amet, eu mel principes dissentiet. </p>
                            </li>

                            <li class="unread-msg-right msg-popup-bot">
                                <div class="username-time">
                                    <a href="#" class="pull-left username-b-unread">UsernameB</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Veritus interesset dissentiunt mei ad, vis id rebum persequeris. His at utroque principes. Et consul dissentiet sed, an nonumes eloquentiam mediocritatem has. Vivendum hendrerit efficiendi et vel,</p>
                            </li>

                             <li class="unread-msg-right">
                                <div class="username-time">
                                    <a href="#" class="pull-left">Username</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Lorem ipsum dolor sit amet, eu mel principes dissentiet. </p>
                            </li>
                             <li class="unread-msg-right msg-popup-bot">
                                <div class="username-time">
                                    <a href="#" class="pull-left username-b-unread">UsernameB</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Veritus interesset dissentiunt mei ad, vis id rebum persequeris. His at utroque principes. Et consul dissentiet sed, an nonumes eloquentiam mediocritatem has. Vivendum hendrerit efficiendi et vel,</p>
                            </li>
                              <li class="unread-msg-right">
                                <div class="username-time">
                                    <a href="#" class="pull-left">Username</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Lorem ipsum dolor sit amet, eu mel principes dissentiet. </p>
                            </li>

                            <li class="unread-msg-right msg-popup-bot">
                                <div class="username-time">
                                    <a href="#" class="pull-left username-b-unread">UsernameB</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Veritus interesset dissentiunt mei ad, vis id rebum persequeris. His at utroque principes. Et consul dissentiet sed, an nonumes eloquentiam mediocritatem has. Vivendum hendrerit efficiendi et vel,</p>
                            </li>

                             <li class="unread-msg-right">
                                <div class="username-time">
                                    <a href="#" class="pull-left">Username</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Lorem ipsum dolor sit amet, eu mel principes dissentiet. </p>
                            </li>
                             <li class="unread-msg-right msg-popup-bot">
                                <div class="username-time">
                                    <a href="#" class="pull-left username-b-unread">UsernameB</a>
                                    <span class="timestamp pull-right"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                                </div>
                                <p class="message-text">Veritus interesset dissentiunt mei ad, vis id rebum persequeris. His at utroque principes. Et consul dissentiet sed, an nonumes eloquentiam mediocritatem has. Vivendum hendrerit efficiendi et vel,</p>
                            </li>
                        </ul>

                        <div class="send-message">
                            <form role="form">
                                <textarea rows="3" class="form-control textarea-popup-msg" placeholder="Start Chatting.."></textarea>
                                <button type="button" class="btn btn-danger pull-right">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
